<!-- 登录界面 -->
<template>
  <div class="login-container relative w-screen h-screen bg-white bg-contain bg-no-repeat bg-right-top">
    <div class="login-wrap">
      <div class="logo -enter-x"></div>
      <h3 class="title -enter-x">仓库管理系统</h3>
      <el-form :model="form" ref="loginForm" class="loginForm -enter-x">
        <el-form-item prop="username" :rules="{ required: true, message: '请输入用户名', trigger: 'blur' }">
          <el-input v-model="form.username" class="my-el-input -enter-x" :autofocus="true" clearable placeholder="请输入用户名" @clear="clearUserName" @focus="errorPass = false"></el-input>
        </el-form-item>
        <el-form-item prop="password" :rules="{ required: true, message: '请输入登录密码', trigger: 'blur' }">
          <el-input v-model="form.password" class="my-el-input -enter-x" type="password" clearable placeholder="请输入登录密码" @focus="errorPass = false" @keyup.enter="onSubmit"></el-input>
        </el-form-item>
        <el-form-item class="my-error-msg" v-if="errorPass">
          <span class="error-msg">{{ errorMsg }}</span>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn -enter-x" type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import {ref, reactive, toRefs, unref} from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute} from "vue-router";


export default {
  setup(){
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const loginForm = ref(null);
    const state = reactive({
      errorPass: false,
      errorMsg: "",
      form: {
        username: "",
        password: ""
      }
    })

    const clearUserName = ()=> {
      state.form.password = "";
    }

    const onSubmit = ()=> {
      unref(loginForm).validate(async (valid) => {
        if(valid) {
          try {
            await store.dispatch('user/login', state.form);
            await store.dispatch('user/getLoginInfo');
            const redirect = route && route.query && route.query.redirect || '/';
            router.push({ path: redirect });
          } catch (e) {
            state.errorPass = true;
            state.errorMsg = e.message;
          }
        }
      })

    }

    return {
      loginForm,
      ...toRefs(state),
      clearUserName,
      onSubmit
    }
  }
}
</script>
<style scoped lang="scss">
.login-container {
  background-image: url("~@/assets/images/bg-login.png");
  .login-wrap {
    position: absolute;
    top: 22vh;
    left: 10vw;
    display: flex;
    flex-direction: column;
    .logo {
      background: url("~@/assets/images/icon-login-wms.png") no-repeat;
      background-size: cover;
    }
    .title {
      text-align: center;
      font-weight: bold;
      color: #3A95F0;
      line-height: 1;
      margin: 0;
      padding: 0;
    }
    ::v-deep(.loginForm) {
      .el-form-item {
        .my-el-input {
          .el-input__suffix {
            display: flex;
            align-items: center;
          }
        }
        .el-form-item__error {
          font-size: inherit;
          padding: 5px 15px;
        }
      }
    }
  }
}
::v-deep(.my-error-msg) {
  .el-form-item__content {
    line-height: 1;
  }
  .error-msg {
    color: red;
    font-size: inherit;
    padding: 0 15px;
  }
}
@media screen and (min-width:768px) {
  .login-wrap {
    //top: 93px;
    //left: 109px;
    .logo {
      width: 187px;
      height: 42px;
    }
    .title {
      margin-top: 12px!important;
      font-size: 23px;
    }
    ::v-deep(.loginForm){
      margin-top: 20px;
      .el-form-item {
        margin-bottom: 20px;
        .my-el-input {
          .el-input__inner {
            height: 24px;
            border-radius: 12px;
          }
        }
        .login-btn {
          margin-top: 10px;
          width: 92px;
          height: 20px;
          line-height: 20px;
          min-height: auto;
          border-radius: 10px;
          padding: 0;
        }
      }
    }
  }
}
@media screen and (min-width:992px) {
  .login-wrap {
    //top: 120px;
    //left: 141px;
    .logo {
      width: 242px;
      height: 54px;
    }
    .title {
      margin-top: 16px!important;
      font-size: 29px;
    }
    ::v-deep(.loginForm){
      margin-top: 26px;
      .el-form-item {
        margin-bottom: 25px;
        .my-el-input {
          .el-input__inner {
            height: 31px;
            border-radius: 16px;
          }
        }
        .login-btn {
          margin-top: 13px;
          width: 119px;
          height: 26px;
          border-radius: 13px;
        }
      }
    }
  }
}
@media screen and (min-width:1200px) {
  .login-wrap {
    //top: 145px;
    //left: 170px;
    .logo {
      width: 293px;
      height: 65px;
    }
    .title {
      margin-top: 19px!important;
      font-size: 35px;
    }

    ::v-deep(.loginForm){
      margin-top: 32px;
      .el-form-item {
        margin-bottom: 30px;
        .my-el-input {
          .el-input__inner {
            height: 38px;
            line-height: 38px;
            border-radius: 19px;
          }
        }
        .login-btn {
          margin-top: 10px;
          width: 144px;
          height: 31px;
          border-radius: 16px;
        }
      }
    }
  }
}
</style>